<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="70px">
        <el-col :span="5">
          <el-form-item label="年份：" prop="year">
            <el-select v-model="formData.year" placeholder="请选择年份：" filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="品种：" prop="varity">
            <el-select v-model="formData.varity" placeholder="请选择品种：" filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in varityOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="试验站：" prop="testStation">
            <el-select v-model="formData.testStation" placeholder="请选择试验站：" filterable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in testStationOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="示范县：" prop="modelCounty">
            <el-select v-model="formData.modelCounty" placeholder="请选择示范县：" filterable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in modelCountyOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="1px" label="" prop="search" style="margin-left:15%">
            <el-button type="primary" icon="el-icon-search" size="small"> 搜索 </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        year: '全部年份',
        varity: '全部品种',
        testStation: '全部试验站',
        modelCounty: '全部示范县',
        field108: 'search',
      },
      rules: {
        year: [],
        varity: [],
        testStation: [],
        modelCounty: [],
      },
      yearOptions: [{
        "label": "全部年份",
        "value": ""
      }, {
        "label": "2010",
        "value": 2010
      }, {
        "label": "2011",
        "value": 2011
      }, {
        "label": "2012",
        "value": 2012
      }, {
        "label": "2013",
        "value": 2013
      }, {
        "label": "2014",
        "value": 2014
      }, {
        "label": "2015",
        "value": 2015
      }, {
        "label": "2016",
        "value": 2016
      }, {
        "label": "2017",
        "value": 2017
      }, {
        "label": "2018",
        "value": 2018
      }, {
        "label": "2019",
        "value": 2019
      }, {
        "label": "2020",
        "value": 2020
      }, {
        "label": "2021",
        "value": 2021
      }, {
        "label": "2022",
        "value": 2022
      }],
      varityOptions: [{
        "label": "全部品种",
        "value": ""
      }, {
        "label": "白蜡",
        "value": "白蜡"
      }, {
        "label": "白糖罂",
        "value": "白糖罂"
      }, {
        "label": "大丁香",
        "value": "大丁香"
      }, {
        "label": "大红袍",
        "value": "大红袍"
      }],
      testStationOptions: [{
        "label": "全部试验站",
        "value": ""
      }, {
        "label": "保山",
        "value": "保山"
      }, {
        "label": "北海",
        "value": "北海"
      }, {
        "label": "儋州",
        "value": "儋州"
      }, {
        "label": "海口",
        "value": "海口"
      }, {
        "label": "泸州",
        "value": "泸州"
      }, {
        "label": "茂名",
        "value": "茂名"
      }, {
        "label": "宁德",
        "value": "宁德"
      }, {
        "label": "钦州",
        "value": "钦州"
      }, {
        "label": "深圳",
        "value": "深圳"
      }, {
        "label": "玉林",
        "value": "玉林"
      }, {
        "label": "湛江",
        "value": "湛江"
      }, {
        "label": "漳州",
        "value": "漳州"
      }],
      modelCountyOptions: [{
        "label": "全部示范县",
        "value": ""
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
  #root{
    margin-top: 0.5%;
  }
</style>
